<template>
  <div>
    <div id="bottomRightChart_wttz" style="width:900px;height:480px;" />
  </div>
</template>

<script>
import Sever from '@/api/selfApi'
export default {
  data() {
    return {
      option: {
        title: {
          show: true,
          text: '', // 主标题文本
          x: '30px', // 水平安
          y: 'top', // 垂直
          textStyle: {
            fontSize: 16,
            fontStyle: 'normal',
            fontWeight: '666',
            color: '#ffffff'
          }
        },
        grid: {
          x: 60,
          y: 20,
          x2: 25,
          y2: 100
        },
        legend: {
          x: 'center', // 'center' | 'left' | {number},
          y: 'bottom', // 'center' | 'bottom' | {number}
          padding: [0, 0, 20, 0],
          textStyle: {
            fontSize: 16, // 字体大小
            color: '#ffffff'
          }
        },
        tooltip: {},
        // dataset: {
        //   source: [
        //     // ['类型', '问题总量', '未解决', '已使用'],
        //     ['南宁市', 106/*, 85.8, 43.3*/],
        //     ['柳州市', 83/*, 73.4, 55.1*/],
        //     ['桂林市', 26/*, 65.2, 42.5*/],
        //     ['钦州市', 72/*, 53.9, 39.1*/],
        //     ['百色市', 90/*, 53.9, 39.1*/],
        //     ['玉林市', 56/*, 53.9, 39.1*/],
        //     ['梧州市', 16/*, 53.9, 39.1*/],
        //     ['北海市', 80/*, 53.9, 39.1*/],
        //     ['防城港市', 46/*, 53.9, 39.1*/],
        //     ['贺州市', 38/*, 53.9, 39.1*/],
        //     ['河池市', 60/*, 53.9, 39.1*/],
        //     ['崇左市', 76/*, 53.9, 39.1*/],
        //     ['来宾市', 55/*, 53.9, 39.1*/]
        //   ]
        // },
        xAxis: {
          type: 'category',
          data: [
            '广西壮族自治区',
            '南宁市',
            '柳州市',
            '桂林市',
            '梧州市',
            '北海市',
            '防城港市',
            '钦州市',
            '贵港市',
            '玉林市',
            '贺州市',
            '百色市',
            '河池市',
            '崇左市',
            '来宾市'],
          axisPointer: {
            type: 'shadow'
          },
          axisLabel: {
            show: true,
            interval: 0, // 此处关键， 设置文本标签全部显示
            rotate: 45, // 标签旋转角度，对于长文本标签设置旋转可避免文本重叠
            textStyle: {
              fontSize: 14, // 字体大小
              color: '#f0f0f0'
            }
          }
        },
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          {
            type: 'bar',
            label: {
              show: true,
              position: 'inside',
              color: '#f0f0f0'
            },
            itemStyle: {
              color: '#37a2da'
            },
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
          }/*, { type: 'bar' }, { type: 'bar' }*/
        ]
      }
    }
  },
  mounted() {
    this.getWtyj_wttzztqk()
  },
  methods: {
    async getWtyj_wttzztqk() {
      try {
        // 请求后台接口
        const res = await Sever.analyse.getWtyj_wttzztqk({
          // 请求参数
          dep_code: '450000'
        })
        if (res.length == 0) {
          // 初始化data中的数值
          Object.assign(this.$data, this.$options.data())
        } else {
          // this.option.xAxis.data = res[0]
          // this.option.yAxis.data = res[1]
          // 取值赋给dep,bz,sy
          res.map(item => {
            this.option.xAxis.data = item.DEP.split(',')
            this.option.series[0].data = item.NUM.split(',').map(Number)
          })
        }
        this.drawPie()
      } catch (error) {
        console.log(error)
        Object.assign(this.$data, this.$options.data())
        this.drawPie()
      }
    },
    drawPie() {
      var chartDom = document.getElementById('bottomRightChart_wttz')
      var myChart = this.$echarts.init(chartDom)
      myChart.setOption(this.option)
    }
  }
}
</script>

<style lang='scss' scoped>
</style>
